<!DOCTYPE html>

<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>用户注册</title>
	<link rel="stylesheet" href="Plugins/layui/css/layui.css">
	<link rel="stylesheet" href="css/login.css">
</head>

<body>
	<div id="container" class="kit-login">
		<div class="kit-login-bg"></div>
		<div class="kit-login-wapper">
			<h1 class="kit-login-slogan">欢迎使用 <br>小区物业后台管理系统</h1>
			<div class="kit-login-form">
				<h4 class="kit-login-title">用户注册</h4>
				<form class="layui-form">
					<div class="kit-login-row">
						<div class="kit-login-col">
							<i class="layui-icon">&#xe616;</i>
							<span class="kit-login-input">
								<input type="text" maxlength="15" placeholder="请输入账号" v-model="username" />
							</span>
						</div>
						<div class="kit-login-col"></div>
					</div>
					<div class="kit-login-row">
						<div class="kit-login-col">
							<i class="layui-icon">&#xe63b;</i>
							<span class="kit-login-input">
								<input type="tel" maxlength="11"  placeholder="请输入手机号" pattern="\d{11}" v-model="phone" />
							</span>
						</div>
						<div class="kit-login-col"></div>
					</div>
					<div class="kit-login-row">
						<div class="kit-login-col">
							<i class="layui-icon">&#xe642;</i>
							<span class="kit-login-input">
								<input type="password" maxlength="15" placeholder="请输入密码" v-model="password" />
							</span>
						</div>
						<div class="kit-login-col"></div>
					</div>
					<div class="kit-login-row">
						<button class="layui-btn kit-login-btn" lay-submit type="button" @click="zhuce">注册</button>
					</div>
					<div class="kit-login-row" style="margin-bottom:0;">
						<a href="login.html" style="color: rgb(153, 153, 153); text-decoration: none; font-size: 13px;"
							id="login">已有账号去登录</a>
					</div>
				</form>
			</div>
		</div>
	</div>
	<script src="Plugins/jquery-2.1.0.js"></script>
	<script src="Plugins/layui/layui.js"></script>
	<script src="Plugins/vue.js"></script>
	<script>
		layui.use(['form', 'layedit', 'laydate'], function () {
			var form = layui.form,
				layer = layui.layer,
				layedit = layui.layedit,
				laydate = layui.laydate;
		});

		var vm = new Vue({
			el: "#container",
			data: {
				username: "",
				password: "",
				phone: ""
			},
			mounted: function () {
				this.$nextTick(function () {
					//
				})
			},
			methods: {
				//获取json 数据
				zhuce: function () {
					var newDate = new Date();
					var login = newDate.getFullYear() + '-' + (newDate.getMonth() + 1) + '-' + newDate.getDate();
					var url = "/Login?word=";
					var obj = {
						"username": vm.username,
						"password": vm.password,
						"login": login,
						"Phone":vm.phone
					}

					if (!obj.username) 
					{
						layer.msg('请填写昵称！');
						return;
					} 
					else if (!obj.password) 
					{
						layer.msg('请填写密码！');
						return;	
					}
					else if (!obj.Phone) 
					{
						layer.msg('请填写11位手机号！');
						return;
					}
					
					console.log(obj);

					$.ajax({
						type: "POST",
						url: url,
						data: obj,
						success: function (res) {
							if (res.status== 'SUCCESS') 
							{
								layer.msg('注册成功！');
								setTimeout(function () {
									window.open('login.html', '_self');
								}, 2000);
							}
							else if (res.status== 'EXIST')
							{
								layer.msg('账号已存在！');
							}
						}
					});
				}
			}
		});
	</script>
</body>

</html>